<template>
  <div class="app-container">
    <el-dialog title="查看维护人员" width="55%" :visible.sync="dialogRoyaltiesVisible" center>
      <el-table :data="entryEmpList">
        <el-table-column align="center" :show-overflow-tooltip="true" property="empName"
                         label="姓名"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" property="workNature"
                         label="工作性质"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" property="jobNo"
                         label="工号"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" property="deptName"
                         label="部门"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" property="status"
                         label="员工状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 4">正式</span>
            <span v-if="scope.row.status === 3">试用</span>
            <span v-if="scope.row.status === 6">离职</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="140" property="positionApplied"
                         label="岗位"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" width="160" property="enterprise"
                         label="驻场公司"></el-table-column>
        <el-table-column align="center" :show-overflow-tooltip="true" property="employmentDate"
                         label="入职时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.employmentDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="empTotal>0"
        :total="empTotal"
        :page.sync="bonusRoyaltiesParams.pageNum"
        :limit.sync="bonusRoyaltiesParams.pageSize"
        @pagination="getEmpList"
      />
    </el-dialog>
    <el-tabs ref="tabs" v-model="activeName">
      <el-tab-pane name="first">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" width="68px">
          <el-form-item>
            <el-date-picker
              v-model="queryParams.createTime"
              :editable="false"
              :clearable="false"
              @change="handleQuery"
              value-format="yyyy-MM"
              type="month"
              placeholder="选择月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="name">
            <el-input
              v-model="queryParams.all"
              placeholder="请输入搜索内容"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <el-tabs @tab-click="getList" v-model="queryParams.status" type="border-card">
          <el-tab-pane name="0" label="未发放">
            <el-table :data="bonusRoyaltiesList" style="width: 100%">
              <el-table-column prop="createTime" align="center" label="月份">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}') }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="empName" align="center" label="姓名"></el-table-column>
              <el-table-column prop="jobNo" align="center" label="工号"></el-table-column>
              <el-table-column prop="positionApplied" align="center" label="岗位名称"></el-table-column>
              <el-table-column prop="deptName" align="center" label="所属部门"></el-table-column>
              <el-table-column prop="countEntryEmp" align="center" label="维护人员"></el-table-column>
              <el-table-column prop="royalties" align="center" label="维护费用"></el-table-column>
              <el-table-column prop="status" align="center" label="发放状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === '0'">未发放</span>
                  <span v-if="scope.row.status === '1'">已发放</span>
                </template>
              </el-table-column>
              <el-table-column align="center" width="200" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="secondEmpClick(scope.row)">查看</el-button>
                  <el-button size="mini" type="text" @click="notarizeClick(scope.row)">确认发放</el-button>
                  <el-button size="mini" type="text" @click="entryEmpDialog(scope.row)">维护人员</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList()"
            />
          </el-tab-pane>
          <el-tab-pane name="1" label="已发放">
            <el-table :data="bonusRoyaltiesList" style="width: 100%">
              <el-table-column prop="createTime" align="center" label="月份">
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.createTime, '{y}-{m}') }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="empName" align="center" label="姓名"></el-table-column>
              <el-table-column prop="jobNo" align="center" label="工号"></el-table-column>
              <el-table-column prop="positionApplied" align="center" label="岗位名称"></el-table-column>
              <el-table-column prop="deptName" align="center" label="所属部门"></el-table-column>
              <el-table-column prop="countEntryEmp" align="center" label="维护人员"></el-table-column>
              <el-table-column prop="royalties" align="center" label="维护费用"></el-table-column>
              <el-table-column prop="status" align="center" label="发放状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status === '0'">未发放</span>
                  <span v-if="scope.row.status === '1'">已发放</span>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="secondEmpClick(scope.row)">查看</el-button>
                  <el-button size="mini" type="text" @click="entryEmpDialog(scope.row)">维护人员</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              @pagination="getList()"
            />


          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane name="second">
        <div>
          <el-button @click="firstEmpClick">返回</el-button>
          <span style="font-size: 20px;margin-left: 20px">提成详情</span>
        </div>
        <div style="margin: 30px">
          <i class="el-icon-user-solid"></i>&nbsp;
          <span style="font-size: 20px">员工信息</span>
          <hr>
          <br>
          <el-descriptions style="font-size: 18px;margin-left: 30px">
            <el-descriptions-item label="姓名">{{ itoBonusListVO.infoVO.empName }}</el-descriptions-item>
            <el-descriptions-item label="工号">{{ itoBonusListVO.infoVO.jobNo }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ itoBonusListVO.infoVO.deptName }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ itoBonusListVO.infoVO.phone }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{
                itoBonusListVO.infoVO.positionApplied
              }}
            </el-descriptions-item>
            <el-descriptions-item label="工作性质">{{ itoBonusListVO.infoVO.workNature }}</el-descriptions-item>
          </el-descriptions>
          <br>
          <i class="el-icon-s-grid"></i>&nbsp;
          <span style="font-size: 20px">奖金详情</span>
          <hr>
          <br>
          <el-table :data="itoBonusListVO.royaltiesVOS" style="width: 100%">
            <el-table-column prop="createTime" align="center" label="周期">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime, '{y}-{m}') }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="countEntryEmp" align="center" label="当月入职人员"></el-table-column>
            <el-table-column prop="royalties" align="center" label="提成"></el-table-column>
            <el-table-column prop="status" align="center" label="发放状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status === '0'">未发放</span>
                <span v-if="scope.row.status === '1'">已发放</span>
              </template>
            </el-table-column>
            <el-table-column prop="grantTime" align="center" label="发放日期">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.grantTime, '{y}-{m}') }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" width="200" label="操作">
              <template slot-scope="scope">
                <el-button size="mini" v-if="scope.row.status === '0'" type="text" @click="notarizeClick(scope.row)">
                  确认发放
                </el-button>
                <el-button size="mini" type="text" @click="entryEmpDialog(scope.row)">入职人员</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {getBonusList, getBonusInfo, getMaintainEmp, updateBonusStatus} from '@/api/system/resumeRoyalties'

  Date.prototype.format = function (fmt) {
    var o = {
      "M+": this.getMonth() + 1, //月份
      "d+": this.getDate(), //日
      "h+": this.getHours(), //小时
      "m+": this.getMinutes(), //分
      "s+": this.getSeconds(), //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  }
  export default {
    name: "",
    data() {
      return {
        itoBonusListVO: {
          infoVO: {},
          royaltiesVOS: []
        },
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          all: '',
          status: 0,
          createTime: new Date(new Date()).format("yyyy-MM-dd")
        },
        total: 0,
        activeName: 'first',
        entryEmpList: [],
        dialogRoyaltiesVisible: false,
        bonusRoyaltiesParams: {
          pageNum: 1,
          pageSize: 10,
        },
        empTotal: 0,
        bonusRoyaltiesList: [],
        bonusInfoParams: {
          resumeEmpId: undefined
        },
        bonusParams: {}
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        getBonusList(this.queryParams).then(res => {
          this.bonusRoyaltiesList = res.rows
          this.total = res.total
        })
      },
      secondEmpClick(row) {
        console.log(row)
        this.bonusInfoParams.resumeEmpId = row.empId
        this.activeName = 'second'
        this.getInfoList()
      },
      getInfoList() {
        getBonusInfo(this.bonusInfoParams).then(res => {
          this.itoBonusListVO = res.data
        })
      },
      firstEmpClick() {
        this.activeName = 'first'
      },
      notarizeClick(row) {
        this.$confirm('是否确认发放当月奖金', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log(row)
          if (row.royaltiesId !== undefined) {
            updateBonusStatus(row.royaltiesId, row.empId, row.royalties).then(res => {
              this.getList()
              this.$message({
                type: 'success',
                message: '已发放!'
              });
            })
          } else {
            updateBonusStatus(row.id, row.resumeEmpId, row.royalties).then(res => {
              this.getList()
              this.$message({
                type: 'success',
                message: '已发放!'
              });
            })
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消发放'
          });
        });
      },
      getEmpList() {
        getMaintainEmp(this.bonusParams).then(res => {
          console.log(res)
          this.entryEmpList = res.rows
          this.empTotal = res.total
        })
      },
      entryEmpDialog(row) {
        this.status = row.status
        if (row.empId !== undefined && row.empId !== null) {
          this.bonusParams.empId = row.empId
        } else {
          this.bonusParams.empId = row.resumeEmpId
        }
        this.bonusParams.createTime = row.createTime
        this.getEmpList()
        this.dialogRoyaltiesVisible = true
      },
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      resetQuery() {
        this.queryParams.pageNum = 1
        this.all = ''
      }
    },
    mounted() {
      //tab标签的权限控制
      this.$nextTick(() => {
        //首先把所有的都隐藏
        this.$refs.tabs.$children[0].$refs.tabs[0].style.display = 'none';
        this.$refs.tabs.$children[0].$refs.tabs[1].style.display = 'none';
      });
    }
  }
</script>

<style scoped>

</style>
